<style scoped>
.accordion-images-icon {
  cursor: pointer;
  background-color: #e8e8e8;
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<style>
.accordion .accordion-images-icon .el-image {
  width: 96px;
  height: 96px;
}
.accordion .accordion-images-icon .el-image img {
  max-height: 96px;
  max-width: 96px;
}
</style>
<!-- 链接弹窗编辑器 -->
<template>
  <div>
    <el-dialog class="accordion" @close="close" title="图片属性设置" :visible.sync="dialogFormVisible">
      <el-form :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="alt 属性" style="margin-bottom:0px;">
              <el-input size="small" v-model="image.imgalt" maxlength="64" placeholder="alt">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="title 属性" style="margin-bottom:0px;">
              <el-input size="small" v-model="image.imgtitle" maxlength="64" placeholder="title">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="标题" style="margin-bottom:5px;">
              <el-input size="small" v-model="image.title" maxlength="128" placeholder="标题">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="内容" style="margin-bottom:0px;">
              <el-input size="small" v-model="image.info" type="textarea" :rows="2" maxlength="500" placeholder="内容">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <hr style="margin:15px 0px;">
        <el-row>
          <el-col :span="24">
            <el-form-item label="图标" style="margin-bottom:5px;">
              <div class="accordion-images-icon">
                <el-image @click="changeIconImage" :fit="'scale-down'" :src="src"></el-image>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="图标 alt 属性" style="margin-bottom:0px;">
              <el-input size="small" v-model="image.iconalt" maxlength="64" placeholder="图标 alt">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标 title 属性" style="margin-bottom:0px;">
              <el-input size="small" v-model="image.icontitle" maxlength="64" placeholder="图标 title">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
    <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import ImagesPopAdd from '@/assets/images/pop_add.png'
import * as functions from '@/core/functions.js'
export default {
  props: {
    width: {
      type: String,
      default: '320px'
    }
  },
  computed: {
    src () {
      if (this.image.icon && this.image.icon.repertory) {
        let src = functions.getRepertoryImageSrcByHostRepertory(this.image.icon.repertory)
        return src
      } else {
        return ImagesPopAdd
      }
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      image: {
        imgalt: '',
        imgtitle: '',
        title: '',
        info: '',
        icon: null,
        iconalt: '',
        icontitle: ''
      },
      callback: () => { }
    }
  },
  methods: {
    close () {
      this.image = {
        imgalt: '',
        imgtitle: '',
        title: '',
        info: '',
        icon: null,
        iconalt: '',
        icontitle: ''
      }
      this.callback = () => { }
    },
    open (lk, callback) {
      this.image = lk
      this.callback = callback
      this.dialogFormVisible = true
    },
    ok () {
      this.callback(this.image)
      this.dialogFormVisible = false
    },
    changeIconImage () {
      this.$refs['chooseImage'].show({ title: '选择图片', max: 1, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let icon = this.image.icon ? JSON.parse(JSON.stringify(this.image.icon)) : {
            id: -1,
            parentId: -1,
            type: 11,
            orderNum: 1,
            config: {
            },
            repertory: null,
            child: null
          }
          icon.repertory = repertoryList[0]
          let image = JSON.parse(JSON.stringify(this.image))
          image.icon = icon
          this.image = image
        }
      })
    }
  },
  components: {
    ChooseRepertory
  }
}

</script>
